<script setup>
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { getForumArticleListService } from '@/api/forumArticle'
import { useRouter, useRoute } from 'vue-router'
import { getHotArticleService } from '@/api/forumArticle';

const router = useRouter()
const route = useRoute()

// 获取文章热榜
const hotArticleList = ref([])
const getHotArticle = async () => {
  let res = await getHotArticleService()
  console.log("文章热榜", res.data)
  hotArticleList.value = res.data
}

onMounted(() => {
  // 获取文章热榜
  getHotArticle()
})

</script>

<template>
  <div class="right-side-other">
    <!-- 公告 -->
    <div class="announce">
      <div class="title">公告</div>
      <div class="announcement">
        <div style="padding-bottom: 10px;border-bottom: 1px solid #ebeef5;">因本网站部署于2核2G阿里云服务器，还望各位大佬高抬贵手，勿恶意攻击本网站，感谢不尽~
        </div>
        <div style="margin-top: 10px;">若网站响应速度较慢，请稍微耐心等待，等我有钱了一定换一个更好的服务器！</div>
      </div>
    </div>
    <!-- 走马灯 -->
    <div class="carousel">
      <el-carousel height="150px">
        <el-carousel-item>
          <img class="carousel-img" src="https://pic.ntimg.cn/file/20220830/26325006_115839897121_2.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img class="carousel-img" src="https://www.foursea.com.cn/uploads/allimg/180120/1-1P120162956201.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img class="carousel-img"
            src="https://k.sinaimg.cn/n/spider20230131/269/w640h429/20230131/ac44-9388ae2ae8435322e44d4783c4045e34.png/w700h350z1l10t10817.jpg"
            alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 文章热榜 -->
    <div class="hot">
      <div class="hot-header">
        <span class="iconfont icon-hot-" style="margin-right: 10px; color: #fe2d46; font-size: 23px"></span>
        <span>文章热榜</span>
      </div>
      <div class="hot-list">
        <ul>
          <li v-for="(item, index) in hotArticleList">
            <div class="hot-list-item" @click="router.push(`/article/detail/${item.articleId}`)">
              <span class="hot-num">{{ index + 1 }}</span>
              <span class="hot-text">{{ item.title }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 其他内容 -->
    <div class="index-aside-footer">

    </div>
  </div>
</template>

<style>
/* 右侧其他 */
.home-page .wrapper .right-side-other {
  width: 250px;
}

.right-side-other .announce {
  background-color: #fff;
  margin-bottom: 20px;
}

.right-side-other .announce .title {
  padding: 20px 15px;
  border-bottom: 1px solid #ebeef5;
  font-size: 18px;
  font-weight: 400;
}

.right-side-other .announce .announcement {
  padding: 20px 15px;
  font-size: 15px;
}

/* 走马灯 */
.carousel {
  background-color: #f7f8fa;
}

.carousel .carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文章热榜 */
.hot {
  margin-top: 20px;
  background-color: #fff;
  padding: 0px 5px 5px;
}

.hot .hot-header {
  height: 50px;
  font-weight: 500;
  border-bottom: 1px solid rgba(228, 230, 235, 0.5);
  margin-left: 15px;
  margin-bottom: 5px;
  color: #252933;
  display: flex;
  align-items: center;
}

.hot .hot-list {
  padding: 0 5px;
}

.hot .hot-list .hot-list-item {
  color: #252933;
  font-size: 14px;
  display: block;
  height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.hot .hot-list .hot-list-item:hover {
  background-color: #f7f8fa;
}

.hot .hot-list .hot-list-item .hot-num {
  background: #9a919f;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  margin-right: 15px;
  width: 25px;
  text-align: center;
  padding: 0 10px;
}

.hot .hot-list li:nth-child(10) .hot-list-item .hot-num {
  padding: 0 5px;
}

.hot .hot-list li:nth-child(1) .hot-list-item .hot-num {
  background: linear-gradient(180deg, #f64242 20%, rgba(246, 66, 66, .4) 80%);
  background-clip: text;
}

.hot .hot-list li:nth-child(2) .hot-list-item .hot-num {
  background: linear-gradient(180deg, #ff7426 20%, rgba(255, 116, 38, .4) 80%);
  background-clip: text;
}

.hot .hot-list li:nth-child(3) .hot-list-item .hot-num {
  background: linear-gradient(180deg, #ffac0c 20%, rgba(255, 172, 12, .4) 80%);
  background-clip: text;
}

.hot .hot-list .hot-list-item .hot-text {
  color: #252933;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 其他内容 */
.index-aside-footer {
  height: 500px;
}
</style>